<template>
  <div class="panel-tab__content">
    <el-table :data="elementListenersList" size="small" border>
      <el-table-column label="序号" width="50px" type="index" />
      <el-table-column label="事件类型" min-width="100px" prop="event" :formatter="formatterEvent" />
      <el-table-column label="监听器类型" min-width="100px" show-overflow-tooltip :formatter="formatterListener" />
      <el-table-column label="操作" width="90px">
        <template v-slot="{ row, $index }">
          <el-button link type="primary" @click="openListenerForm(row, $index)">编辑</el-button>
          <el-button link type="danger" @click="removeListener(row, $index)">移除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="element-drawer__button">
      <el-button size="small" type="primary" :icon="Plus" @click="openListenerForm(null)">添加监听器</el-button>
    </div>

    <!-- 监听器 编辑/创建 部分 -->
    <el-drawer
      v-model="listenerFormModelVisible"
      title="执行监听器"
      :size="`${width}px`"
      class="listener-drawer"
      append-to-body
      destroy-on-close>
      <el-form :model="listenerForm" label-width="96px" ref="listenerFormRef" @submit.prevent>
        <el-form-item label="事件类型" prop="event" :rules="{ required: true, trigger: ['blur', 'change'], message: '请选择事件类型' }">
          <el-select v-model="listenerForm.event">
            <el-option v-for="item in EXECUTION_EVENT_TYPE" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="监听器类型" prop="listenerType" :rules="{ required: true, trigger: ['blur', 'change'], message: '请选择监听器类型' }">
          <el-input
            v-model="listenerForm[selectedProp]"
            clearable
            class="input-with-select">
            <template #prepend>
              <el-select v-model="listenerForm.listenerType" style="width: 100%">
                <el-option v-for="item in LISTENER_TYPE" :key="item.key" :label="item.label" :value="item.value" />
              </el-select>
            </template>
            <template #append>
              <el-button :icon="Search" />
            </template>
          </el-input>
        </el-form-item>
        <template v-for="item in LISTENER_TYPEWithoutJB">
          <el-form-item
            v-if="listenerForm.listenerType === item.value"
            :key="item.key"
            :label="item.label"
            :prop="item.prop"
            :rules="{ required: true, trigger: ['blur', 'change'] }"
          >
            <el-input v-model="listenerForm[item.prop]" clearable />
          </el-form-item>
        </template>
        <!--   脚本类型       -->
        <!--        <template v-if="listenerForm.listenerType === LISTENER_TYPE[LISTENER_TYPE.length - 1].value">-->
        <!--          <el-form-item-->
        <!--            label="脚本格式"-->
        <!--            prop="scriptFormat"-->
        <!--            key="listener-script-format"-->
        <!--            :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本格式' }"-->
        <!--          >-->
        <!--            <el-input v-model="listenerForm.scriptFormat" clearable />-->
        <!--          </el-form-item>-->
        <!--          <el-form-item-->
        <!--            label="脚本类型"-->
        <!--            prop="scriptType"-->
        <!--            key="listener-script-type"-->
        <!--            :rules="{ required: true, trigger: ['blur', 'change'], message: '请选择脚本类型' }"-->
        <!--          >-->
        <!--            <el-select v-model="listenerForm.scriptType">-->
        <!--              <el-option v-for="item in SCRIPT_TYPE" :key="item.value" :label="item.label" :value="item.value" />-->
        <!--            </el-select>-->
        <!--          </el-form-item>-->
        <!--          <el-form-item-->
        <!--            v-if="listenerForm.scriptType === SCRIPT_TYPE[0].value"-->
        <!--            label="脚本内容"-->
        <!--            prop="value"-->
        <!--            key="listener-script"-->
        <!--            :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本内容' }"-->
        <!--          >-->
        <!--            <el-input v-model="listenerForm.value" clearable />-->
        <!--          </el-form-item>-->
        <!--          <el-form-item-->
        <!--            v-if="listenerForm.scriptType === SCRIPT_TYPE[1].value"-->
        <!--            label="资源地址"-->
        <!--            prop="resource"-->
        <!--            key="listener-resource"-->
        <!--            :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写资源地址' }"-->
        <!--          >-->
        <!--            <el-input v-model="listenerForm.resource" clearable />-->
        <!--          </el-form-item>-->
        <!--        </template>-->
      </el-form>
      <el-divider />
      <div class="listener-filed__title">
        <span><el-icon><Menu /></el-icon>注入字段：</span>
        <el-button size="small" type="primary" @click="openListenerFieldForm(null)">添加字段</el-button>
      </div>
      <el-table :data="fieldsListOfListener" size="small" max-height="240" border fit style="flex: none">
        <el-table-column label="序号" width="50px" type="index" />
        <el-table-column label="字段名称" min-width="100px" prop="name" />
        <el-table-column label="字段类型" min-width="80px" show-overflow-tooltip :formatter="formatterField" />
        <el-table-column label="字段值/表达式" min-width="100px" show-overflow-tooltip :formatter="row => row.string || row.expression" />
        <el-table-column label="操作" width="100px">
          <template v-slot="{ row, $index }">
            <el-button link type="primary" @click="openListenerFieldForm(row, $index)">编辑</el-button>
            <el-button link type="danger" @click="removeListenerField(row, $index)">移除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="element-drawer__button">
        <el-button size="small" @click="listenerFormModelVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="saveListenerConfig">保 存</el-button>
      </div>
    </el-drawer>

    <!-- 注入西段 编辑/创建 部分 -->
    <el-dialog title="字段配置" v-model="listenerFieldFormModelVisible" width="600px" append-to-body destroy-on-close>
      <el-form :model="listenerFieldForm" size="small" label-width="96px" ref="listenerFieldFormRef" style="height: 136px" @submit.prevent>
        <el-form-item label="字段名称：" prop="name" :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写字段名称' }">
          <el-input v-model="listenerFieldForm.name" clearable />
        </el-form-item>
        <el-form-item label="字段类型：" prop="fieldType" :rules="{ required: true, trigger: ['blur', 'change'], message: '请选择字段类型' }">
          <el-select v-model="listenerFieldForm.fieldType">
            <el-option v-for="item in FIELD_TYPE" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item
          v-if="listenerFieldForm.fieldType === FIELD_TYPE[0].value"
          label="字段值："
          prop="string"
          key="field-string"
          :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写字段值' }"
        >
          <el-input v-model="listenerFieldForm.string" clearable />
        </el-form-item>
        <el-form-item
          v-if="listenerFieldForm.fieldType === FIELD_TYPE[1].value"
          label="表达式："
          prop="expression"
          key="field-expression"
          :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写表达式' }"
        >
          <el-input v-model="listenerFieldForm.expression" clearable />
        </el-form-item>
      </el-form>
      <template v-slot:footer>
        <el-button size="small" @click="listenerFieldFormModelVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="saveListenerFiled">确 定</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import { createListenerObject, updateElementExtensions } from "../../utils";
import {
  initListenerType,
  initListenerForm,
  EXECUTION_EVENT_TYPE,
  LISTENER_TYPE,
  FIELD_TYPE,
  SCRIPT_TYPE,
  EVENT_DEFINITION_TYPE
} from "../listeners/utilSelf";
import { Plus, Search } from "@element-plus/icons-vue";

export default {
  name: "ElementListeners",
  setup() {
    return { Plus, Search }
  },
  props: {
    id: String,
    type: String
  },
  inject: {
    prefix: "prefix",
    width: "width"
  },
  data() {
    return {
      elementListenersList: [], // 监听器列表
      listenerForm: {}, // 监听器详情表单
      listenerFormModelVisible: false, // 监听器 编辑 侧边栏显示状态
      fieldsListOfListener: [],
      listenerFieldForm: {}, // 监听器 注入字段 详情表单
      listenerFieldFormModelVisible: false, // 监听器 注入字段表单弹窗 显示状态
      editingListenerIndex: -1, // 监听器所在下标，-1 为新增
      editingListenerFieldIndex: -1, // 字段所在下标，-1 为新增
    };
  },
  watch: {
    id: {
      immediate: true,
      handler(val) {
        val && val.length && this.$nextTick(() => this.resetListenersList());
      }
    }
  },
  computed: {
    EXECUTION_EVENT_TYPE() { return EXECUTION_EVENT_TYPE },
    LISTENER_TYPE() { return LISTENER_TYPE },
    FIELD_TYPE() { return FIELD_TYPE },
    SCRIPT_TYPE() { return SCRIPT_TYPE },
    EVENT_DEFINITION_TYPE() { return EVENT_DEFINITION_TYPE },
    formatterEvent() {
      return (row) => {
        return EXECUTION_EVENT_TYPE.find(find => find.value === row.event)?.label || ""
      }
    },
    formatterListener() {
      return (row) => {
        return LISTENER_TYPE.find(find => find.value === row.listener)?.label || ""
      }
    },
    formatterField() {
      return (row) => {
        return FIELD_TYPE.find(find => find.value === row.fieldType)?.label || ""
      }
    },
    selectedProp() {
      return LISTENER_TYPE.find(find => find.value === this.listenerForm.listenerType)?.prop || ''
    }
  },
  methods: {
    resetListenersList() {
      this.bpmnElement = window.bpmnInstances.bpmnElement;
      this.otherExtensionList = [];
      this.bpmnElementListeners =
        this.bpmnElement.businessObject?.extensionElements?.values?.filter(ex => ex.$type === `${this.prefix}:ExecutionListener`) ?? [];
      this.elementListenersList = this.bpmnElementListeners.map(listener => initListenerType(listener));
    },
    // 打开 监听器详情 侧边栏
    openListenerForm(listener, index) {
      if (listener) {
        this.listenerForm = initListenerForm(listener);
        this.editingListenerIndex = index;
      } else {
        this.listenerForm = {};
        this.editingListenerIndex = -1; // 标记为新增
      }
      if (listener && listener.fields) {
        this.fieldsListOfListener = listener.fields.map(field => ({
          ...field,
          fieldType: field.string ? "string" : "expression"
        }));
      } else {
        this.fieldsListOfListener = [];
        this.listenerForm["fields"] = []
      }
      // 打开侧边栏并清楚验证状态
      this.listenerFormModelVisible = true;
      this.$nextTick(() => {
        if (this.$refs["listenerFormRef"]) this.$refs["listenerFormRef"].clearValidate();
      });
    },
    // 打开监听器字段编辑弹窗
    openListenerFieldForm(field, index) {
      this.listenerFieldForm = field ? JSON.parse(JSON.stringify(field)) : {};
      this.editingListenerFieldIndex = field ? index : -1;
      this.listenerFieldFormModelVisible = true;
      this.$nextTick(() => {
        if (this.$refs["listenerFieldFormRef"]) this.$refs["listenerFieldFormRef"].clearValidate();
      });
    },
    // 保存监听器注入字段
    async saveListenerFiled() {
      let validateStatus = await this.$refs["listenerFieldFormRef"].validate();
      if (!validateStatus) return; // 验证不通过直接返回
      if (this.editingListenerFieldIndex === -1) {
        this.fieldsListOfListener.push(this.listenerFieldForm);
        this.listenerForm.fields.push(this.listenerFieldForm);
      } else {
        this.fieldsListOfListener.splice(this.editingListenerFieldIndex, 1, this.listenerFieldForm);
        this.listenerForm.fields.splice(this.editingListenerFieldIndex, 1, this.listenerFieldForm);
      }
      this.listenerFieldFormModelVisible = false;
      this.$nextTick(() => (this.listenerFieldForm = {}));
    },
    // 移除监听器字段
    removeListenerField(field, index) {
      this.$confirm("确认移除该字段吗？", "提示", {
        confirmButtonText: "确 认",
        cancelButtonText: "取 消"
      })
        .then(() => {
          this.fieldsListOfListener.splice(index, 1);
          this.listenerForm.fields.splice(index, 1);
        })
        .catch(() => console.info("操作取消"));
    },
    // 移除监听器
    removeListener(listener, index) {
      this.$confirm("确认移除该监听器吗？", "提示", {
        confirmButtonText: "确 认",
        cancelButtonText: "取 消"
      })
        .then(() => {
          this.bpmnElementListeners.splice(index, 1);
          this.elementListenersList.splice(index, 1);
          updateElementExtensions(this.bpmnElement, this.otherExtensionList.concat(this.bpmnElementListeners));
        })
        .catch(() => console.info("操作取消"));
    },
    // 保存监听器配置
    async saveListenerConfig() {
      let validateStatus = await this.$refs["listenerFormRef"].validate();
      if (!validateStatus) return; // 验证不通过直接返回
      const listenerObject = createListenerObject(this.listenerForm, false, this.prefix);
      if (this.editingListenerIndex === -1) {
        this.bpmnElementListeners.push(listenerObject);
        this.elementListenersList.push(this.listenerForm);
      } else {
        this.bpmnElementListeners.splice(this.editingListenerIndex, 1, listenerObject);
        this.elementListenersList.splice(this.editingListenerIndex, 1, this.listenerForm);
      }
      // 保存其他配置
      this.otherExtensionList = this.bpmnElement.businessObject?.extensionElements?.values?.filter(ex => ex.$type !== `${this.prefix}:ExecutionListener`) ?? [];
      updateElementExtensions(this.bpmnElement, this.otherExtensionList.concat(this.bpmnElementListeners));
      // 4. 隐藏侧边栏
      this.listenerFormModelVisible = false;
      this.listenerForm = {};
    }
  }
};
</script>
